<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>在线考试系统</title>
    <link rel="shortcut icon" th:href="@{/static/favicon.ico}" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!--[if lt IE 8]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <link th:href="@{/static/css/style.css}" rel="stylesheet">
    <link th:href="@{/static/css/ui.css}" rel="stylesheet">
    <link th:href="@{/static/css/style-list.min.css?v=4.0.0}" rel="stylesheet">
    <link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/static/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/static/css/bootstrap-table.css}" rel="stylesheet">
    <link th:href="@{/static/css/animate.min.css}" rel="stylesheet">
    <link th:href="@{/static/css/admin.css}" rel="stylesheet">
    <link th:href="@{/static/css/bootstrap-datetimepicker.min.css}" rel="stylesheet" />
    <link th:href="@{/static/css/jquery.validator.css}" rel="stylesheet">
    <link th:href="@{/static/css/ui.css}" rel="stylesheet">
</head>

<body class="gray-bg white">
<div class="form-inline" role="form">
    <div class="tm_main">
        <div class="tm_container">
            <ul class="tm_breadcrumb">
                <li><a th:href="@{/common/welcome}">首页</a> <span class="divider">&gt;</span></li>
                <li class="active">试卷列表</li>
            </ul>
        </div>
    </div>
</div>
<div id="toolbar">
    <div class="form-inline" role="form">
        <div class="form-group">
            <div class="btn-group hidden-xs" id="exampleToolbar" role="group">
                <button type="button" id="addBtn"  class="btn btn-outline btn-default">
                    <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                </button>
                <button type="button" id="btn_delete" class="btn btn-outline btn-default">
                    <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                </button>
            </div>
        </div>
        <div class="form-group">
            <select class="form-control"  name="courseKey" id="courseKey">
                <option value="">所属科目</option>
            </select>
        </div>
        <div class="form-group">
            <select class="form-control"  name="configKey" id="configKey">
                <option value="">试题配置</option>
                <option value="0">已配置</option>
                <option value="1">未配置</option>
            </select>
        </div>
        <div class="form-group">
            <select class="form-control"  name="typeKey" id="typeKey">
                <option value="">试卷类型</option>
            </select>
        </div>
        <div class="form-group">
            <input name="nameKey" type="text" class="form-control" placeholder="搜索试卷名称" />
        </div>
        <div class="form-group">
            <input name="userNameKey" type="text" class="form-control" placeholder="搜索创建人" />
        </div>
        <button id="searchBtn" class="btn btn-primary btn-md">搜索</button>
    </div>
</div>
<table id="table" data-toolbar="#toolbar"  data-show-toggle="true" data-show-columns="true" data-show-refresh="true" data-query-params="queryParams">
</table>
<script th:src="@{/static/js/jquery-3.3.1.min.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/static/js/bootstrap.min.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/static/js/bootstrap-table.min.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/static/js/bootstrap-table-editable.min.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/static/js/bootstrap-table-zh-CN.min.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/static/js/layer/layer.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/static/js/bootstrap-editable.min.js}" type="text/javascript" charset="utf-8"></script>
<script  th:src="@{/static/js/bootstrap-datetimepicker.min.js}"></script>
<script  th:src="@{/static/js/bootstrap-datetimepicker.zh-CN.js}"></script>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var courses = [[${courses}]];
    if(courses!=null){
        for(var i=0;i<courses.length;i++){
            var course=courses[i];
            $('#courseKey').append("<option  value='"+course.id+"'>"+course.courseName+"</option>");
        }
    }
    var types = [[${types}]];
    if(types!=null){
        for(var i=0;i<types.length;i++){
            var type=types[i];
            $('#typeKey').append("<option  value='"+type.id+"'>"+type.value+"</option>");
        }
    }
    /*]]>*/
    var table = $('#table');
    table.bootstrapTable({
        contentType: "application/x-www-form-urlencoded",
        method:'get',
        url: './list/json' ,
        height: 600 ,
        pagination: true,//是否开启分页（*）
        pageNumber: 1,//初始化加载第一页，默认第一页
        pageSize: 50,//每页的记录行数（*）
        pageList: [30, 50, 100,150],//可供选择的每页的行数（*）
        sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
        columns: [
            {
                checkbox : true,
                align : 'center',
                value:"id",
            },
            {
                title: '序号',
                align: 'center',
                formatter: 'opIndex'
            },{
                field: 'paperName',
                title: '试卷名称',
                align: 'center',
                sortable:true,
            },{
                field: 'courseName',
                title: '所属课程',
                align: 'center',
                sortable:true,
            }, {
                field: 'paperType.type',
                title: '试卷类型',
                align: 'center',
            }, {
                field: 'configStatus',
                title: '试题配置',
                align: 'center',
                formatter:function (value,row,index) {
                    if(value==0){
                        return "已配置<br>" +
                            "<button type=\"button\" class=\"tm_btns\" style='padding: 0px 3px;' onclick='config("+row.id+")'>配置</button>";
                    }else {
                        return "<span style='font-weight: bold'>未配置</span><br>"+
                            "<button type=\"button\" class=\"tm_btns\" style='padding: 0px 3px;' onclick='config("+row.id+")'>配置</button>";
                    }
                }
            }, {
                title: '时间设定',
                align: 'center',
                formatter:function (value,row,index) {
                    return row.startTime+"<br>"+row.endTime;
                }
            }, {
                field: 'paperMinute',
                title: '考试时长(分钟)',
                align: 'center',
            }, {
                field: 'passScore',
                title: '及格分数',
                align: 'center',
            }, {
                field:'userNum',
                title: '考试人数',
                align: 'center',
            }, {
                field: 'showKey',
                title: '公布答案',
                align: 'center',
                formatter:function (value) {
                    if(value==0){
                        return "是";
                    }else {
                        return "否";
                    }
                }
            },{
                title: '创建人',
                align: 'center',
                formatter:function(value,row,index){
                    return row.cUserName+"<br>"+row.cDate;
                }

            },{
                field: 'option',
                title: '操作',
                align: 'center',
                formatter: 'opFormatter'

            }],
        onEditableSave:function(field,row,oldValue,el){
            table.bootstrapTable("resetView");
        }
    });
    function refreshTable(){
        table.bootstrapTable('refresh',{pageNumber:1});
    }
    function queryParams(params){
        $('#toolbar').find('input,select').each(function(){
            params[$(this).attr('name')] = $(this).val();
        });
        return params;
    }
    function opIndex(value, row, index){
        return [index+1].join('');
    }
    function opFormatter(value, row, index) {
        return [
            '<button data-toggle="tooltip" data-id="' +"'"+ row.id+"'" + '" class="btn btn-success btn-xs edit" onclick="initEdit('+"'" + row.id+"'" + ')" title="Edit">',
            '<i class="glyphicon glyphicon-pencil"></i>',
            '</button>  ',
            '<button data-toggle="tooltop" data-id="' +"'" + row.id +"'" + '" class="btn btn-danger btn-xs edit remove" onclick="initRemove(' +"'" + row.id+"'" +')" title="Remove">',
            '<i class="glyphicon glyphicon-remove"></i>',
            '</button>'
        ].join('');
    }
    $("#searchBtn").on("click",function(){
        refreshTable();
    });
    $("#addBtn").on("click",function () {
        initEdit(0);
    });
    function initEdit(id){
        window.open ('./detail/'+id);
    }
    $("[data-toggle='tooltip']").tooltip();
    $('#toolbar').find('select').change(function () {
        table.bootstrapTable('refresh',{pageNumber:1});
    });
    $("#btn_delete").on("click",function () {
        var selectContent = table.bootstrapTable('getSelections');
        if(selectContent.length==0) {
            layer.alert('请选择一列数据!', {
                icon: 2
            });
            return false;
        }else{
            var id="";
            for(var i = 0; i <selectContent.length;i++){
                id+=selectContent[i].id+",";
            }
            initRemove(id);
        }
    });
    function initRemove(id){
        layer.confirm("确认删除？",{icon:3,title:"请选择"},function(index){
            $.ajax({
                type:"post",
                dateType:"json",
                url:"./delete/"+id,
                success:function(ret){
                    if(ret.status){
                        layer.msg("操作成功",{icon:1,time:2000});
                    }else{
                        layer.msg("删除失败:"+ret.data,{icon:2,time:2000});
                    }
                    refreshTable();
                }
            });
            layer.close(index);
        });
    }
    function config(id) {
        window.location.href="./section/list/"+id;
    }
</script>
</body>
</html>